<template>
    <view class="activity">
        <view class="poster">
            <image class="poster-img" :src="poster"></image>
            <image class="poster-more" @tap="goIndex" src="@/static/images/poster-more.png"></image>
        </view>
        <view class="list-box">
            <goods-item
                v-for="(item, index) in list"
                :key="item.id"
                :item="item"
                :index="index"
                :is-new="index < 5"
                :isActivity="false"
            ></goods-item>
        </view>
        <!-- 现金红包 -->
        <view class="popup-red-package">
            <popup-red-package ref="popup-red-package" @refresh="refresh"></popup-red-package>
        </view>
    </view>
</template>

<script>
import GoodsItem from './components/goods-item';
import RedPackage from '@/mixins/red-package';
import PopupRedPackage from './components/red-package';

export default {
    data() {
        return {
            id: '',
            poster: '',
            pagination: {
                page: 1,
                size: 20,
                total: 0
            },
            finish: false,
            list: []
        };
    },
    components: {
        GoodsItem,
        PopupRedPackage
    },
    mixins: [RedPackage],

    onLoad(options) {
        this.id = options.activityId;
        this.refresh();
        uni.reportAnalytics('enter_activity', {});
    },

    methods: {
        refresh() {
            this.getData(this.id);
            this.getList({ activityId: this.id });
        },
        getData(params) {
            this.$service.wxJdActivity
                .info({
                    id: params
                })
                .then(res => {
                    this.poster = res.pick;
                })
                .catch(({ message }) => {
                    uni.showToast({
                        title: message,
                        icon: 'none'
                    });
                });
        },
        getList(params) {
            const { page, size } = this.pagination;
            this.$service.wxjlj
                .page({ page, size, ...params })
                .then(res => {
                    uni.stopPullDownRefresh();
                    if (!params.page || params.page == 1) {
                        this.list = res.list;
                    } else {
                        this.list.push(...res.list);
                    }
                    this.finish = this.list.length == res.pagination.total;
                    this.pagination = res.pagination;
                })
                .catch(({ message }) => {
                    uni.stopPullDownRefresh();
                    uni.showToast({
                        title: message,
                        icon: 'none'
                    });
                });
        },
        goIndex() {
            uni.reportAnalytics('click_activity_more', {});
            uni.redirectTo({
                url: '/pages/index/home'
            });
        }
    },
    onPullDownRefresh() {
        this.getData(this.id);
        this.getList({ activityId: this.id });
    },
    onReachBottom() {
        if (!this.finish) {
            this.getList({
                page: this.pagination.page + 1
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.popup-red-package {
    /deep/.cl-popup {
        background-color: transparent;
        overflow: visible;

        &__container {
            padding: 0;
        }
    }

    /deep/.cl-countdown__number {
        background-color: transparent !important;
        margin: 0 !important;
        padding: 0;
        font-size: 22rpx;
        border-radius: 10rpx;
    }
}
.activity {
    width: 100%;
    min-height: 100vh;
    background: #f91b46;

    .poster {
        width: 100%;
        height: 421rpx;
        position: relative;
        &-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        &-more {
            position: absolute;
            right: 0rpx;
            left: 0;
            bottom: 34rpx;
            margin: auto;
            z-index: 20;
            width: 242rpx;
            height: 72rpx;
        }
    }
    .list-box {
        margin-top: 20rpx;
        padding-bottom: 20rpx;
    }
}
</style>
